<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <meta name="description" content="Use localFrameToFixedFrameGenerator for adequate rotation.">
    <meta name="cesium-sandcastle-labels" content="Tutorials">
    <title>Cesium Demo</title>
    <script type="text/javascript" src="../Sandcastle-header.js"></script>
    <script type="text/javascript" src="../../../Build/CesiumUnminified/Cesium.js" nomodule></script>
    <script type="module" src="../load-cesium-es6.js"></script>
</head>
<body class="sandcastle-loading" data-sandcastle-bucket="bucket-requirejs.html">
<style>
        @import url(../templates/bucket.css);
    </style>
    <div id="cesiumContainer" class="fullSize"></div>
    <div id="loadingOverlay">
        <h1>Loading...</h1>
    </div>
    <div id="toolbar">
        <table class="infoPanel">
            <tbody>
                <tr>
                    <td>Click on the 3D window then use the keyboard to change settings.</td>
                </tr>
                <tr>
                    <td>Heading: <span id="heading"></span>°</td>
                </tr>
                <tr>
                    <td>← to left/→ to right</td>
                </tr>
                <tr>
                    <td>Pitch: <span id="pitch"></span>°</td>
                </tr>
                <tr>
                    <td>↑ to up/↓ to down</td>
                </tr>
                <tr>
                    <td>roll: <span id="roll"></span>°</td>
                </tr>
                <tr>
                    <td>← + ⇧ left/→ + ⇧ right</td>
                </tr>
            </tbody>
        </table>
    </div>
    <script id="cesium_sandcastle_script">
function startup(Cesium) {
    'use strict';
//Sandcastle_Begin
var viewer = new Cesium.Viewer('cesiumContainer');
var canvas = viewer.canvas;
canvas.setAttribute('tabindex', '0'); // needed to put focus on the canvas
canvas.addEventListener('click', function() {
    canvas.focus();
});
canvas.focus();

var scene = viewer.scene;
var camera = viewer.camera;
var controller = scene.screenSpaceCameraController;
var r = 0;
var center = new Cesium.Cartesian3();

var hpRoll = new Cesium.HeadingPitchRoll();
var hpRange = new Cesium.HeadingPitchRange();
var deltaRadians = Cesium.Math.toRadians(1.0);

var localFrames = [
    {
        pos : Cesium.Cartesian3.fromDegrees(-123.075, 44.045000, 5000.0),
        converter : Cesium.Transforms.eastNorthUpToFixedFrame,
        comments : 'Classical East North Up\nlocal Frame'
    },
    {
        pos : Cesium.Cartesian3.fromDegrees(-123.075, 44.050000, 5500.0),
        converter : Cesium.Transforms.localFrameToFixedFrameGenerator('north', 'west'),
        comments : 'North West Up\nlocal Frame'
    },
    {
        pos : Cesium.Cartesian3.fromDegrees(-123.075, 44.040000, 4500.0),
        converter : Cesium.Transforms.localFrameToFixedFrameGenerator('south', 'up'),
        comments : 'South Up West\nlocal Frame'
    },
    {
        pos : Cesium.Cartesian3.fromDegrees(-123.075, 44.050000, 4500.0),
        converter : Cesium.Transforms.localFrameToFixedFrameGenerator('up', 'east'),
        comments : 'Up East North\nlocal Frame'
    },
    {
        pos : Cesium.Cartesian3.fromDegrees(-123.075, 44.040000, 5500.0),
        converter : Cesium.Transforms.localFrameToFixedFrameGenerator('down', 'east'),
        comments : 'Down East South\nlocal Frame'
    }
];

var primitives = [];
var hprRollZero = new Cesium.HeadingPitchRoll();

for (var i = 0; i < localFrames.length; i++) {
    var position = localFrames[i].pos;
    var converter = localFrames[i].converter;
    var comments = localFrames[i].comments;
    var planePrimitive = scene.primitives.add(Cesium.Model.fromGltf({
        url : '../../SampleData/models/CesiumAir/Cesium_Air.glb',
        modelMatrix : Cesium.Transforms.headingPitchRollToFixedFrame(position, hpRoll, Cesium.Ellipsoid.WGS84, converter),
        minimumPixelSize : 128
    }));

    primitives.push({primitive : planePrimitive, converter : converter, position : position});
    var modelMatrix = Cesium.Transforms.headingPitchRollToFixedFrame(position, hprRollZero, Cesium.Ellipsoid.WGS84, converter);
    scene.primitives.add(new Cesium.DebugModelMatrixPrimitive({
        modelMatrix : modelMatrix,
        length : 300.0,
        width : 10.0
    }));

    var positionLabel = position.clone();
    positionLabel.z = position.z + 300.0;
    viewer.entities.add({
        position : positionLabel,
        label : {
            text : comments,
            font : '18px Helvetica',
            fillColor : Cesium.Color.WHITE,
            outlineColor : Cesium.Color.BLACK,
            outlineWidth : 2,
            style : Cesium.LabelStyle.FILL_AND_OUTLINE,
            verticalOrigin : Cesium.VerticalOrigin.CENTER,
            HorizontalOrigin : Cesium.HorizontalOrigin.RIGHT
        }
    });
}

primitives[0].primitive.readyPromise.then(function(model) {
    // Play and loop all animations at half-speed
    model.activeAnimations.addAll({
        multiplier : 0.5,
        loop : Cesium.ModelAnimationLoop.REPEAT
    });

    // Zoom to model
    r = 2.0 * Math.max(model.boundingSphere.radius, camera.frustum.near);
    controller.minimumZoomDistance = r * 0.5;
    Cesium.Matrix4.multiplyByPoint(model.modelMatrix, model.boundingSphere.center, center);
    var heading = Cesium.Math.toRadians(90.0);
    var pitch = Cesium.Math.toRadians(0.0);
    hpRange.heading = heading;
    hpRange.pitch = pitch;
    hpRange.range = r * 100.0;
    camera.lookAt(center, hpRange);
});

document.addEventListener('keydown', function(e) {
    switch (e.keyCode) {
        case 40:
            // pitch down
            hpRoll.pitch -= deltaRadians;
            if (hpRoll.pitch < -Cesium.Math.TWO_PI) {
                hpRoll.pitch += Cesium.Math.TWO_PI;
            }
            break;
        case 38:
            // pitch up
            hpRoll.pitch += deltaRadians;
            if (hpRoll.pitch > Cesium.Math.TWO_PI) {
                hpRoll.pitch -= Cesium.Math.TWO_PI;
            }
            break;
        case 39:
            if (e.shiftKey) {
                // roll right
                hpRoll.roll += deltaRadians;
                if (hpRoll.roll > Cesium.Math.TWO_PI) {
                    hpRoll.roll -= Cesium.Math.TWO_PI;
                }
            } else {
                // turn right
                hpRoll.heading += deltaRadians;
                if (hpRoll.heading > Cesium.Math.TWO_PI) {
                    hpRoll.heading -= Cesium.Math.TWO_PI;
                }
            }
            break;
        case 37:
            if (e.shiftKey) {
                // roll left until
                hpRoll.roll -= deltaRadians;
                if (hpRoll.roll < 0.0) {
                    hpRoll.roll += Cesium.Math.TWO_PI;
                }
            } else {
                // turn left
                hpRoll.heading -= deltaRadians;
                if (hpRoll.heading < 0.0) {
                    hpRoll.heading += Cesium.Math.TWO_PI;
                }
            }
            break;
        default:
    }
});

var headingSpan = document.getElementById('heading');
var pitchSpan = document.getElementById('pitch');
var rollSpan = document.getElementById('roll');

viewer.scene.preUpdate.addEventListener(function(scene, time) {
    for (var i = 0; i < primitives.length; i++) {
        var primitive = primitives[i].primitive;
        var converter = primitives[i].converter;
        var position = primitives[i].position;
        Cesium.Transforms.headingPitchRollToFixedFrame(position, hpRoll, Cesium.Ellipsoid.WGS84, converter, primitive.modelMatrix);
    }
});

viewer.scene.preRender.addEventListener(function(scene, time) {
    headingSpan.innerHTML = Cesium.Math.toDegrees(hpRoll.heading).toFixed(1);
    pitchSpan.innerHTML = Cesium.Math.toDegrees(hpRoll.pitch).toFixed(1);
    rollSpan.innerHTML = Cesium.Math.toDegrees(hpRoll.roll).toFixed(1);
});
//Sandcastle_End
    Sandcastle.finishedLoading();
}
if (typeof Cesium !== 'undefined') {
    window.startupCalled = true;
    startup(Cesium);
}
</script>
</body>
</html>
